<template>
  <div class="login_content flex-column">
    <div class="logo_content flex1">
      <img :src="require('../../assets/logo.png')" alt class="logo" />
    </div>
    <div class="form_content">
      <CoustomButton @click="toLogin" width="80%" :radius="25" type="hight" class="login_btn">手机号登陆</CoustomButton>
      <CoustomButton @click="$router.replace('/')" width="80%" :radius="25" class="login_btn">立即体验</CoustomButton>
      <p class="tip flex-middle flex-center">
        <van-checkbox checked-color="#d5d5d5" v-model="checked" shape="square" icon-size="15" />
        <span>同意</span> 《用户协议》《隐私政策》《儿童隐私政策》
      </p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: false,
      showPhoneLogin: false
    };
  },
  methods: {
    toLogin() {
      if (!this.checked) {
        this.$toast("请先勾选《用户协议》《隐私政策》《儿童隐私政策》");
      } else {
          this.$emit('goPhoneLogin')
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.login_content {
  height: 100vh;
  background: $afterColor;
  .logo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    display: block;
    margin: 150px auto;
  }
}
.form_content {
  .login_btn {
    display: block;
    margin: 15px auto;
  }
  .tip {
    color: $beforeColor;
    margin: 20px auto;
    text-align: center;
    span {
      color: $opBorderColor;
      margin-left: 5px;
    }
  }
}
</style>